<template>
    <view class="container">
        <view class="recent-result">
            <view class="result-header">
                <text>最近考试结果</text>
            </view>
            <view class="result-examtime">  
                <text>考试时间：{{ recentResult.examTime }}</text>
            </view>
            <view class="result-summary">
                <view><text>{{ recentResult.total }}</text><text>总题数</text></view>
                <view><text>{{ recentResult.corrent }}</text><text>答对</text></view>
                <view><text>{{ recentResult.wrong }}</text><text>答错</text></view>
                <view><text>{{ recentResult.unanswered }}</text><text>未答</text></view>
            </view>
        </view>
        <view class="exam-list">
            <view class="exam-header">
                <text>考试记录列表</text>
            </view>
            <view>
                <view class="exam-item" v-for="result in examResults" :key="result.id" @click="clickExamItem(result.id)">
                    <view class="exam-stat">
                        <text class="exam-correct">{{ result.correct }}</text>
                        <text>/</text>
                        <text class="exam-total">{{ result.total }}</text>
                    </view>
                    <view class="exam-time">{{ result.date }}</view>
                </view>
            </view>
            <!-- 此处增加一个uniapp的分页 -->
            <view class="pagination">
                <uni-pagination :show-icon="true" :total="totalItems" :page-size="pageSize" :current-page="currentPage" title="考试结果列表" @change="onPageChange"/>
            </view>
        </view>
    </view>
</template>

<script setup>
const totalItems = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);
import { ref, onMounted } from 'vue';
import { requestGet } from '@/api/request';

const recentResult = ref({
    examId: '',
    total: '',
    corrent: '',
    wrong: '',
    unanswered: '',
    examTime: ''
});

const examResults = ref([]);

onMounted(() => {
    (async () => {
        try {
            const res = await requestGet('/exam/recent');
            if (res && res.code === 0 && res.data) {
                recentResult.value = {
                    examId: res.data.examId || '--',
                    total: (res.data.total === 0 || res.data.total === '' ? '--' : res.data.total),
                    corrent: (res.data.corrent === 0 || res.data.corrent === '' ? '--' : res.data.corrent),
                    wrong: (res.data.wrong === 0 || res.data.wrong === '' ? '--' : res.data.wrong),
                    unanswered: (res.data.unanswered === 0 || res.data.unanswered === '' ? '--' : res.data.unanswered),
                    examTime: res.data.examTime === '' ? '--' : res.data.examTime
                };
            }

            // 请求考试记录列表
            const recordRes = await requestGet('/exam/record', { page: currentPage.value, pageSize: pageSize.value });
            if (recordRes && recordRes.code === 0 && recordRes.data && Array.isArray(recordRes.data.list)) {
                examResults.value = recordRes.data.list.map(item => ({
                    id: item.examId || '--',
                    correct: (item.correct === 0 || item.correct === '' ? '--' : item.correct),
                    total: (item.total === 0 || item.total === '' ? '--' : item.total),
                    date: item.examTime === '' ? '--' : item.examTime
                        
                }));

                // 更新分页信息
                if (recordRes.data.pagination) {
                    totalItems.value = recordRes.data.pagination.total || 0;
                    pageSize.value = recordRes.data.pagination.pageSize || 20;
                    currentPage.value = recordRes.data.pagination.page || 1;
                } 
            }
        } catch (e) {
            // 可选：错误处理
        }
    })();
});

// 考试结果列表
const demoExamResults = [
    { id: 1, date: '2024-01-01 10:00:00', correct: 10, total: 15 },
    { id: 2, date: '2024-01-02 11:00:00', correct: 12, total: 15 },
    { id: 3, date: '2024-01-03 12:00:00', correct: 14, total: 15 },
    // 更多考试记录...
];

// 分页变化时的处理函数
const onPageChange = (newPage) => {
    console.log('分页变化，新的页码：', newPage);
    // 更新当前页码
    let changeType = newPage.type; // 'prev', 'next', 'current'
    let newPageId = newPage.current;

    uni.showLoading({
        title: '加载中...',
        mask: true
    });

    // 重新请求数据
    (async () => {
        try {
            // 请求考试记录列表
            const recordRes = await requestGet('/exam/record', { page: newPageId, pageSize: pageSize.value });
            if (recordRes && recordRes.code === 0 && recordRes.data && Array.isArray(recordRes.data.list)) {
                examResults.value = recordRes.data.list.map(item => ({
                    id: item.examId || '--',
                    correct: (item.correct === 0 || item.correct === '' ? '--' : item.correct),
                    total: (item.total === 0 || item.total === '' ? '--' : item.total),
                    date: item.examTime === '' ? '--' : item.examTime
                }));

                
            }

            // 更新分页信息
            if (recordRes.data.pagination) {
                totalItems.value = recordRes.data.pagination.total || 0;
                pageSize.value = recordRes.data.pagination.pageSize || 20;
                currentPage.value = recordRes.data.pagination.page || 1;
            } 
        } catch (e) {
            // 可选：错误处理
        } finally {
            uni.hideLoading();
        }
    })();

};


const clickExamItem = (id) => {
    console.log('点击了考试记录，id=', id);
    if (!id || id === '--') {
        uni.showToast({
            title: '无效的考试记录ID',
            duration: 2000,
            icon: 'error'
        });
        return;
    }
    // 跳转到考试结果详情页面
    uni.navigateTo({
        url: `/pages/exampage/exam?examId=${id}&viewOnly=true`
    });
}
</script>

<style scoped>

    /* 全局背景设置为 灰色 */
    .container {
        background-color: #f5f5f5;
        padding: 10px;
    }

    .recent-result {
        padding: 10px;
        border-radius: 10rpx;
        background-color: #fff;
    }

    .result-header {
        text-align: center;
        font-size: 36rpx;
        font-weight: bold;
        margin: 40rpx 0 20rpx 0;
    }
    .result-examtime {
        text-align: center;
        font-size: 24rpx;
        color: #888;
        margin-bottom: 10rpx;
    }
    .result-summary {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-top: 30rpx;
        margin-bottom: 30rpx;
    }
    .result-summary > view {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .result-summary > view text:first-child {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
    }
    .result-summary > view text:last-child {
        font-size: 24rpx;
        color: #666;
    }

    .exam-list {
        margin-top: 20px;
        padding: 10px;
        border-radius: 10rpx;
        background-color: #fff;
    }

    .exam-header{
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    .exam-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }
    .exam-item > view:first-child {
        text-align: left;
        flex: 1;
    }
    .exam-item > view:last-child {
        text-align: right;
        flex: 1;
    }
    .exam-item > view:first-child text:first-child {
        color: #4caf50;
    }

    /* 分页样式 */
    .pagination {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
</style>